<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../static/index.css" type="text/css" />
    <script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script src="https://cdn.bootcss.com/jsbarcode/3.11.0/JsBarcode.all.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#b01").click(function () {
                //每次请求之前先清空div，不然生成多个二维码在一个div里面
                $("#url1").empty();
                //ajax专用于发请求
                htmlobj=$.ajax({url:"/imei",async:false});
                $("#mydiv").html(htmlobj.responseText);
                //第一种方法：qrcode直接生成二维码
                $('#url1').qrcode(String(htmlobj.responseText));
                //第二种：python实现，缺点每执行一次会本地会保存一次图片
                //htmlobj=$.ajax({url:"/qrcode",async:false});
                //console.log(htmlobj.responseText, 'htmlobj')
                //$("#url1").attr("src",htmlobj.responseText);
                $('#url3').JsBarcode(String(htmlobj.responseText));

            });
            $("#b02").click(function () {
                $("#url2").empty();
                //用jquery获取select的值
                var a = $("#env option:selected").val();
                htmlobj=$.ajax({url:"/ProductNo/"+a,async:false});
                $("#mydiv01").html(htmlobj.responseText);
                $('#url2').qrcode(String(htmlobj.responseText));
                $('#url4').JsBarcode(String(htmlobj.responseText));

            });
            $("#b03").click(function () {

                //用jquery获取select的值
                var b = $("#env1 option:selected").val();
                var c = $("#fname").val();
                $.ajax({
                    type:"POST",
                    url:"/document",
                    //对象转为字符串
                    data: JSON.stringify({env:b,shipmentNo:c}),
                    success: function (res) {
                        //字符串转为对象
                        $("#area").val(JSON.parse(res).data);
                    }
                });

            });
            $(".btn-bg-blue").click(function(){
                $(".divIMEI").show();
                $(".divNO").hide();
                $(".logist").hide();

            });
            $(".btn-bg-POP").click(function(){
                $(".divNO").show();
                $(".divIMEI").hide();
                $(".logist").hide();
            });
            $(".btn-bg-document").click(function(){
                $(".logist").show();
                $(".divNO").hide();
                $(".divIMEI").hide();
            });

        });
    </script>
    <title>小工具</title>
</head>
<body>
    <div class="bodydiv">
        <div class="left">
            <h3 align="center">欢迎使用小工具</h3>
            <button class="btn-bg-blue" style="height:50px;">IMEI</button>
            <button class="btn-bg-POP" style="height:50px;">物品编号</button>
            <button class="btn-bg-document" style="height:50px;">待上门变为已发货</button>
        </div>
        <div class="right">
            <div class="divIMEI">
                <div>
                    <button id="b01" type="button">点击生成IMEI</button>
                    <span id="mydiv"></span>
                </div>
                <div class="image-wrap">
                    <!--<img src="" id="url1">-->
                    <div id="url1"></div>
                    <!--SVG 意为可缩放矢量图形（Scalable Vector Graphics）。SVG 使用 XML 格式定义图像。-->
                    <div id="url5">
                     <svg id="url3"></svg>
                    </div>
                </div>
            </div>
            <div class="divNO" style="display: none">
                <div id="select">
                 <div id="label1" >请选择环境：</div>
                 <select id="env">
                    <option value ="uat">UAT</option>
                    <option value ="fat">FAT</option>
                 </select>
                <button id="b02">生成物品编号</button>
                <span id="mydiv01"></span>
                </div>
                <div class="image-wrap">
                    <div id="url2"></div>
                    <div id="url6">
                        <svg id="url4"></svg>
                    </div>
                </div>
            </div>
            <div class="logist" style="display: none">
                　<div id="select">
                     <div id="label1" >请选择环境：</div>
                     <select id="env1">
                        <option value ="uat">UAT</option>
                        <option value ="fat">FAT</option>
                     </select>
    {#                placeholder 属性规定可描述输入字段预期值的简短的提示信息。#}
    {#                该提示会在用户输入值之前显示在输入字段中。#}
                    <input type="text" id="fname" placeholder="请输入出库单号" size="40">
                </div>
                <div class="image-wrap">
                    <button id="b03" >执行发货操作</button>
                    <textarea rows="10" cols="30" id="area" placeholder="这里显示执行结果..." readonly></textarea>
                </div>
            </div>
        </div>
    </div>

</body>
</html>